<template>
  <div>
    展示商品
    <table>
      <tr>
        <td>id</td>
        <td>名称</td>
        <td>分类</td>
      </tr>
      <van-checkbox-group v-model='checklist'>
        <tr v-for='i in goods'>
          <td>
            <van-checkbox :name='i.id'></van-checkbox>
            {{ i.id }}
          </td>
          <td>{{ i.name }}</td>
          <td>
            <van-button @click='setcate(i.cid)'>{{ i.cname }}</van-button>
          </td>
          <td>
            <van-button @click='del(i.id)'>删除</van-button>

          </td>
        </tr>
      </van-checkbox-group>
      <tr>
        <td>
          <van-pagination
            v-model="page"
            :total-items="total"
            :items-per-page="size"
            @change='getGoods'
          />
        </td>
      </tr>
      <tr>
        <td>
          <van-button @click='delchecked'>选中删除</van-button>
        </td>
      </tr>
    </table>


  </div>
</template>
<script>
export default {
  data() {
    return {
      goods: [],
      size: 2,
      total: 0,
      page: 1,
      cid: 0,
      checklist: []
    }
  },
  methods: {
    //分页的形式获取商品信息
    getGoods(p) {
      this.page = p
      this.axios.get('goodsM?page=' + p + '&size=' + this.size + '&cid=' + this.cid).then(res => {
        this.goods = res.data.list
        this.total = res.data.total
      })
    },
    setcate(cid) {
      this.cid = cid
      this.getGoods(1)
    },
    //删除
    del(id) {
      this.axios.delete('goodsM?id=' + id + '&type=1').then(res => {
        this.getGoods(1)
      })
    },
    //批量删除
    delchecked() {
      this.axios.delete('goodsM?id=' + this.checklist + '&type=2').then(res => {
        this.getGoods(1)
      })
    }
  },
  mounted() {
    this.getGoods(1)
  },
}
</script>
<style lang="">

</style>
